<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:a4j="http://richfaces.org/a4j">

	<p:dataTable value="#{customerList}" var="customer" rows="15"
		emptyMessage="No Data" paginator="true" paginatorPosition="bottom">

		<p:column sortBy="#{customer.firstName}"
			filterBy="#{customer.firstName}">
			<f:facet name="header">
				<h:outputText value="First Name" />
			</f:facet>
			<h:outputText value="#{customer.firstName}" />
		</p:column>

		<p:column sortBy="#{customer.lastName}"
			filterBy="#{customer.lastName}">
			<f:facet name="header">
				<h:outputText value="Last Name" />
			</f:facet>
			<h:outputText value="#{customer.lastName}" />
		</p:column>

		<p:column styleClass="centered">
			<f:facet name="header">
				<h:outputText value="Birth Date" />
			</f:facet>
			<h:outputText value="#{customer.birthDate}">
				<f:convertDateTime timeZone="GMT+2" pattern="yyyy.MM.dd"
					dateStyle="short" />
			</h:outputText>
		</p:column>

		<p:column styleClass="centered">
			<f:facet name="header">
				<h:outputText value="Gender" />
			</f:facet>
			<h:outputText value="#{customer.gender.getGender()}" />
		</p:column>

		<p:column filterBy="#{customer.pin}" filterStyleClass="filter-text"
			styleClass="centered">
			<f:facet name="header">
				<h:outputText value="PIN" />
			</f:facet>
			<h:outputText value="#{customer.pin}" />
		</p:column>

		<p:column>
			<f:facet name="header">
				<h:outputText value="Operations" />
			</f:facet>
			<h:form>
				<h:commandButton id="editButton" image="/images/wrench-32.png"
					value="Edit" action="#{customerBean.editCustomer}">
					<f:setPropertyActionListener value="#{customer}"
						target="#{customer}" />
				</h:commandButton>
				<p:tooltip for="editButton" value="Edit customer" />
			</h:form>
		</p:column>
	</p:dataTable>

</ui:composition>